<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Chenqiu
 * @LastEditTime: 2021-09-23 09:20:22
-->
<template>
  <div ref="root" style="height: 90%"></div>
</template>
<script>
import { Line } from "@antv/g2plot";
export default {
  data() {},
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      let line = new Line(this.$refs["root"], {
        data: [
          {
            Date: "2016-01",
            scales: 1760,
          },
          {
            Date: "2016-02",
            scales: 1824,
          },
          {
            Date: "2016-03",
            scales: 1801,
          },
          {
            Date: "2016-04",
            scales: 2001,
          },
          {
            Date: "2016-05",
            scales: 1640,
          },
          {
            Date: "2016-06",
            scales: 1502,
          },
          {
            Date: "2016-07",
            scales: 1621,
          },
          {
            Date: "2016-08",
            scales: 1480,
          },
          {
            Date: "2016-09",
            scales: 1549,
          },
          {
            Date: "2016-10",
            scales: 1390,
          },
          {
            Date: "2016-11",
            scales: 1325,
          },
          {
            Date: "2016-12",
            scales: 1250,
          },
          {
            Date: "2017-01",
            scales: 1394,
          },
          {
            Date: "2017-02",
            scales: 1406,
          },
          {
            Date: "2017-03",
            scales: 1578,
          },
          {
            Date: "2017-04",
            scales: 1465,
          },
          {
            Date: "2017-05",
            scales: 1689,
          },
          {
            Date: "2017-06",
            scales: 1755,
          },
          {
            Date: "2017-07",
            scales: 1495,
          },
          {
            Date: "2017-08",
            scales: 1508,
          },
          {
            Date: "2017-09",
            scales: 1433,
          },
          {
            Date: "2017-10",
            scales: 1344,
          },
          {
            Date: "2017-11",
            scales: 1201,
          },
          {
            Date: "2017-12",
            scales: 1065,
          },
          {
            Date: "2018-01",
            scales: 1255,
          },
          {
            Date: "2018-02",
            scales: 1429,
          },
          {
            Date: "2018-03",
            scales: 1398,
          },
          {
            Date: "2018-04",
            scales: 1678,
          },
          {
            Date: "2018-05",
            scales: 1524,
          },
          {
            Date: "2018-06",
            scales: 1688,
          },
          {
            Date: "2018-07",
            scales: 1500,
          },
          {
            Date: "2018-08",
            scales: 1670,
          },
          {
            Date: "2018-09",
            scales: 1734,
          },
          {
            Date: "2018-10",
            scales: 1699,
          },
          {
            Date: "2018-11",
            scales: 1508,
          },
          {
            Date: "2018-12",
            scales: 1680,
          },
          {
            Date: "2019-01",
            scales: 1750,
          },
          {
            Date: "2019-02",
            scales: 1602,
          },
          {
            Date: "2019-03",
            scales: 1834,
          },
          {
            Date: "2019-04",
            scales: 1722,
          },
          {
            Date: "2019-05",
            scales: 1430,
          },
          {
            Date: "2019-06",
            scales: 1280,
          },
          {
            Date: "2019-07",
            scales: 1367,
          },
          {
            Date: "2019-08",
            scales: 1155,
          },
          {
            Date: "2019-09",
            scales: 1289,
          },
          {
            Date: "2019-10",
            scales: 1104,
          },
          {
            Date: "2019-11",
            scales: 1246,
          },
          {
            Date: "2019-12",
            scales: 1098,
          },
          {
            Date: "2020-01",
            scales: 1189,
          },
          {
            Date: "2020-02",
            scales: 1276,
          },
          {
            Date: "2020-03",
            scales: 1033,
          },
          {
            Date: "2020-04",
            scales: 956,
          },
          {
            Date: "2020-05",
            scales: 845,
          },
          {
            Date: "2020-06",
            scales: 1089,
          },
          {
            Date: "2020-07",
            scales: 944,
          },
          {
            Date: "2020-08",
            scales: 1043,
          },
          {
            Date: "2020-09",
            scales: 893,
          },
          {
            Date: "2020-10",
            scales: 840,
          },
          {
            Date: "2020-11",
            scales: 934,
          },
          {
            Date: "2020-12",
            scales: 810,
          },
          {
            Date: "2021-01",
            scales: 782,
          },
          {
            Date: "2021-02",
            scales: 1089,
          },
          {
            Date: "2021-03",
            scales: 745,
          },
          {
            Date: "2021-04",
            scales: 680,
          },
          {
            Date: "2021-05",
            scales: 802,
          },
          {
            Date: "2021-06",
            scales: 697,
          },
          {
            Date: "2021-07",
            scales: 583,
          },
          {
            Date: "2021-08",
            scales: 456,
          },
          {
            Date: "2021-09",
            scales: 524,
          },
        ],
        padding: "auto",
        xField: "Date",
        yField: "scales",
        annotations: [
          // 低于中位数颜色变化
          {
            type: "regionFilter",
            start: ["min", "median"],
            end: ["max", "0"],
            color: "#F4664A",
          },
          {
            type: "text",
            position: ["min", "median"],
            content: "中位数",
            offsetY: -4,
            style: {
              textBaseline: "bottom",
            },
          },
          {
            type: "line",
            start: ["min", "median"],
            end: ["max", "median"],
            style: {
              stroke: "#F4664A",
              lineDash: [2, 2],
            },
          },
        ],
      });
      line.render();
    },
  },
};
</script>